<template>
  <div class="app-container"  >
    <div v-loading="listLoading" >
    <!-- 基本信息 -->
    <div  class="box" >
      <span class="l_title">基本信息</span>
      <el-row  class="infolist infolist_top">
        <el-col :span="3">客户姓名：{{ detail.real_name }}</el-col>
        <el-col :span="3">电话：{{ detail.mobile }}</el-col>
        <el-col :span="5">身份证号码：{{ detail.idcard }}</el-col>
        <el-col :span="6">申请医院：{{ detail.merchant_name }}</el-col>
        <el-col :span="6">提交时间：{{ detail.create_time|formatDate }}</el-col>
        <el-col :span="6" v-if="detail.rela!=''" style="color:red;margin-top:10px">号码异常：
          <span v-for="(item,index) in detail.rela" style="cursor: pointer;" @click="toDetail(item.order_id)">{{item.name}}、</span>
        </el-col> 
        <el-col :span="6" style="margin-top:10px">身份证验证：
          <span v-if="bairong.idcard.RESULT==2||bairong.idcard==''" style="color:red;">{{bairong.idcard.MESSAGE}}</span>
          <span  v-else>{{bairong.idcard.MESSAGE}}</span>
        </el-col> 
      </el-row>
    </div>
    <el-divider></el-divider>
    <!-- 大数据分析和异常点 -->
    <div  class="box">
      <span class="l_title">大数据分析和异常点</span>
      <el-row  class="infolist infolist_top">
        <el-col :span="3">布尔大数据</el-col>
        <el-col :span="3">综合得分：{{ bool.multiple_score }}</el-col>
        <el-col :span="5">审核建议：{{ bool.verify_recomment }}</el-col>
        <el-col :span="8">风险标注：<span  v-for="(item,index) in bool.hit_risk_tagging">{{ item }}、</span></el-col>
        <el-col :span="2" class="toinfo">
            <el-button style="float: right; padding: 0 0;" type="text" @click="booldata(detail.order_id)">查看更多</el-button>
          </el-col>
      </el-row>
      <!-- <el-row  class="infolist infolist_top">
        <el-col :span="3">同盾大数据</el-col>
        <el-col :span="3">风险分数：{{ tong.final_score }}</el-col>
        <el-col :span="5">决策结果：{{ tong.final_decision }}</el-col>
        <el-col :span="10" class="toinfo">
            <el-button style="float: right; padding: 0 0;" type="text" @click="tongdun(detail.order_id)">查看更多</el-button>
          </el-col>
      </el-row> -->
       <el-row  class="infolist infolist_top">
        <el-col :span="3">百融大数据</el-col>
        <el-col :span="3">风险分数：{{ bairong.final_weight }}</el-col>
        <el-col :span="5">决策结果：{{ bairong.final_decision }}</el-col>
        <el-col :span="8">自然人：<span >{{ bairong.person }}</span></el-col>
        <el-col :span="2" class="toinfo">
            <el-button style="float: right; padding: 0 0;" type="text" @click="bairongdetail(detail.order_id)">查看更多</el-button>
          </el-col>
      </el-row>
    </div>
    <el-divider v-if="detail.order_status>=4"></el-divider>
    <!-- 信审申请信息 -->
    <div  class="box" v-if="detail.order_status>=4">
      <span class="l_title">信审申请信息</span>
      <el-row  class="infolist infolist_top">
        <el-col :span="3">项目金额：{{ detail.project.total_money }}</el-col> 
        <el-col :span="3">总债权金额：{{ detail.project.total_money+detail.project.total_money * detail.project.money_rate*detail.project.total_period |numberFormat }}</el-col>
        <el-col :span="5">服务项目：<span v-for="(item,index) in detail.service_list">({{ item.project_name }})</span></el-col>
        <el-col :span="8">商户名称：{{ detail.merchant_name }}</el-col>
      </el-row>
      <el-row  class="infolist">
        <el-col :span="3" class="mgtop">订单期数：{{ detail.project.total_period }}</el-col>
        <el-col :span="3" class="mgtop">月还款金额：{{ period_money | numberFormat }}</el-col>
        <el-col :span="5" class="mgtop">
          开始还款日：
            <span v-if="this.eight==0">{{ payment_date|formatDateYearMonthDay }} 23:59:59前</span>
            <span v-if="this.eight==1">{{ payment_date|formatDateYearMonth }} 23:59:59前</span>
        </el-col>
         <el-col :span="6" class="mgtop">
          最终还款日:
            <span v-if="this.eight==0">{{ paid_date|formatDateYearMonthDay }} 23:59:59前</span>
            <span v-if="this.eight==1">{{ paid_date|formatDateYearMonth }} 23:59:59前</span>
        </el-col>
      </el-row>
      <el-row  class="infolist infolist_top">
        <el-col :span="3" >手术日期：{{ detail.operation_date }}</el-col>
        <el-col :span="3" >每期还款日：{{ pay_day }}号</el-col>
        <el-col :span="14">
          备注信息：{{ detail.project.desc }}
        </el-col>
      </el-row> 
    </div>
    <el-divider v-if="detail.order_status>=4"></el-divider>
    <!-- 认证信息 -->
    <div  class="box" v-if="detail.order_status>=5">
      <span class="l_title">认证信息</span>
      <el-row  class="infolist infolist_top">
        <el-col :span="3">学历：{{ detail.letter.education }}</el-col>
        <el-col :span="3">职业：{{ detail.letter.duty }}</el-col>
        <el-col :span="5">单位名称：{{ detail.letter.company_name }}</el-col>
        <el-col :span="9">单位地址：{{ detail.letter.company_address }}</el-col>
        
        <el-col :span="6" class="mgtop">户籍地址：{{ detail.letter.household_reg_address }}</el-col>
        <el-col :span="6" class="mgtop">家庭住址：{{ detail.letter.family_address }}</el-col>
      </el-row>
    </div>
    <el-divider v-if="detail.order_status>=5"></el-divider>
    <!-- 紧急联系人 -->
    <div  class="box" v-if="detail.order_status>=4&&detail.relation!=''">
      <span class="l_title">紧急联系人</span>
      <el-row  class="infolist infolist_top" v-for="(item,index) in detail.relation">
        <el-col :span="3">联系人{{index+1}}</el-col>
        <el-col :span="3">姓名：{{ item.name }}</el-col>
        <el-col :span="5">电话：{{ item.mobile }}</el-col>
        <el-col :span="4">关系：{{ item.relation_name }}</el-col>
        <el-col :span="6" v-if="item.rela!=''" style="color:red;">号码异常：
          <span v-for="(v,k) in item.rela" style="cursor: pointer;" @click="toDetail(v.order_id)">{{v.name}}、</span>
        </el-col> 
      </el-row>
    </div>
    <!-- 合同信息审核信息 -->
    <el-collapse v-model="activeName"  style="margin-top:15px">
      <el-collapse-item title="信审申请信息(视频图片)" name="1" v-if="detail.order_status>=5">
        <div  class="box">
          <span class="l_title">通讯视频</span>
          <el-row  class="infolist infolist_top" >
            <el-col :span="24">
              <div class="grid-content bg-purple-light video_box" v-for="(item,index) in project.tongxunlu" >
                <div class="dalogg" @click="openVideoDialog(item.path)"></div>
                <video  :src="item.path+'#t=1'" preload="none" controls type="video/mp4" poster></video> 
              </div>
              <div class="grid-content bg-purple-light video_box" v-for="(item,index) in project.tonghuajilu" >
                <div class="dalogg" @click="openVideoDialog(item.path)"></div>
                <video  :src="item.path" preload="none" controls type="video/mp4" ></video> 
              </div>
            </el-col>
          </el-row>
        </div>
        <div  class="box" style="margin-top:20px">
          <span class="l_title" >图片信息</span>
          <el-row  class="infolist infolist_top" >
            <el-col :span="24">
              <viewer style="display:inline">
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.idcard_zheng" >
                  <div class="hovers">身份证</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.idcard_fan" >
                  <div class="hovers">身份证</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.zhimafen" >
                  <div class="hovers">芝麻分</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.relation1" >
                  <div class="hovers">联系人1</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.relation2" >
                  <div class="hovers">联系人2</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.shouchi" >
                  <div class="hovers">手持照片</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.taobao_address" >
                  <div class="hovers">淘宝地址</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.taobao_buy_record" >
                  <div class="hovers">淘宝购买记录</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.wechat_income" >
                  <div class="hovers">微信收入</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.wechat_outcome" >
                  <div class="hovers">微信支出</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.alipay_income" >
                  <div class="hovers">支付宝收入</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.alipay_outcome" >
                  <div class="hovers">支付宝支出</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in project.other" >
                  <div class="hovers">其他</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>           
              </viewer>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="合同信息(视频图片)" name="2"  v-if="detail.order_status>7">
        <div  class="box">
          <el-row  class="infolist infolist_top" >
            <el-col :span="24">
              <viewer style="display:inline">
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.fenqi" >
                  <div class="hovers">分期协议</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div> 
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.shoushu" >
                  <div class="hovers">手术消费单</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.student" >
                  <div class="hovers">不是学生承诺书</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.comfire_order" >
                  <div class="hovers">术后确认单</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.should" >
                  <div class="hovers">应收转让协议</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.shoushu_agree" >
                  <div class="hovers">手术知情同意书</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.shoushu_tongzhi" >
                  <div class="hovers">手术通知单</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.logo" >
                  <div class="hovers">LOGO</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in contract.security_agreement" >
                  <div class="hovers">担保协议</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div>
              </viewer>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="术后照片" name="3"  v-if="detail.order_status>=10">
        <div  class="box">
          <el-row  class="infolist infolist_top" >
            <el-col :span="24">
              <viewer style="display:inline">
                <div class="grid-content bg-purple-light img_box" v-for="(item,index) in operation" >
                  <div class="hovers">术后照片</div>
                  <img  :src="item.path" height="100%" width="100%" >
                </div> 
              </viewer>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="订单操作" name="4" v-if="detail.order_status<11" style="font-size:13px">
        <template>
          <el-tabs v-model="activeNameDone" @tab-click="handleClick" style="margin-left:60px">
            <el-tab-pane label="审核" name="1" v-if="nodes.indexOf('91')!=-1&&(detail.order_status==1 || detail.order_status==5 || detail.order_status==8 || detail.order_status==10|| detail.order_status==11)">
              <el-form ref="dataForm" :model="form" label-width="90px" :rules="rules">
                  <el-form-item label="审核" prop="order_status">
                    <el-radio-group v-if="detail.order_status==1" v-model="form.order_status">
                      <el-radio label="3">通过</el-radio>
                      <el-radio label="2">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==5" v-model="form.order_status">
                      <el-radio label="7">通过</el-radio>
                      <el-radio label="6">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==8" v-model="form.order_status">
                      <el-radio label="10">通过</el-radio>
                      <el-radio label="9">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==10" v-model="form.order_status">
                      <el-radio label="14">退单</el-radio>
                      <el-radio label="20">拒绝</el-radio>
                    </el-radio-group>
                    <el-radio-group v-if="detail.order_status==11" v-model="form.order_status">
                      <el-radio label="13">通过</el-radio>
                      <el-radio label="12">驳回</el-radio>
                      <el-radio label="20">拒绝</el-radio>

                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7" label="保理模式" prop="factoring_rate">
                    <el-radio-group v-model="form.factoring_model">
                      <el-radio label="1">正常</el-radio>
                      <el-radio label="2">买断</el-radio>
                      <el-radio label="3">绿通</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="折扣率:" prop="factoring_rate">
                    <el-input v-model="form.factoring_rate" type="text" @keyup.native="mathauto(1)"/>
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="首打款:" prop="first_pay">
                    <el-input v-model="form.first_pay" type="text" @keyup.native="mathauto(2)"/>
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="本人情况:" prop="selfs">
                    <el-input v-model="form.selfs" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="家庭情况:" prop="famliy">
                    <el-input v-model="form.famliy" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="负债情况:" prop="liabilities">
                    <el-input v-model="form.liabilities" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7||form.order_status==20" label="其他情况:" prop="others">
                    <el-input v-model="form.others" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==7" label="通过点:" prop="others">
                    <el-input v-model="form.point" type="textarea" />
                  </el-form-item>
                  <el-form-item v-if="form.order_status==20" label="拒绝点:" prop="others">
                    <el-input v-model="form.point" type="textarea" />
                  </el-form-item>
                  <el-form-item label="备注:" prop="content">
                    <el-input v-model="form.content" type="textarea" style="width:30%"/>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="客户备注表" name="6" v-if="nodes.indexOf('91')!=-1&&detail.order_status<7">
              <el-table :data="tableDataMain" border style="width: 25%" :show-header="false">
                <el-table-column prop="title" width="120"> </el-table-column>
                <el-table-column prop="value" > </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="订单记录" name="4">
                <el-table :key="tableRecord"  size="mini" :data="record" border fit highlight-current-row style="width: 70%;margin-left:3%" >

                  <el-table-column label="管理类别" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.type_name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作人" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作内容" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.content }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="创建时间" class-name="status-col">
                    <template slot-scope="{row}">

                      {{ row.create_time|formatDate }}

                    </template>
                  </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="催收" name="2"  v-if="nodes.indexOf('87')!=-1">
              <el-form ref="collectform" :model="form" label-width="80px" style="margin-left:3%">
                <el-form-item label="催收方式" prop="way">
                  <el-checkbox-group v-model="collectform.way">
                    <el-checkbox v-for="item in way_list.way" :label="item.id">{{item.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="催收结果">
                  <el-radio-group v-model="collectform.result">
                    <el-radio v-for="item in way_list.result" :label="item.id">{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="备注信息">
                  <el-input type="textarea" v-model="collectform.desc" style="width:30%"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitCollect">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="催收记录" name="3"  v-if="nodes.indexOf('87')!=-1">
              <el-timeline :reverse="reverse" style="margin-top:20px">
                <el-timeline-item
                  v-for="(collect, index) in collect_list"
                  :key="index"
                  :timestamp="collect.collect_time">
                  <div style="color:#666;font-size:14px">
                    <div class="collectcss">催收人员：<span>{{collect.collector}}</span></div>
                    <div class="collectcss">催收方式：<span>{{collect.way}}</span></div>
                    <div class="collectcss">催收结果：<span>{{collect.result_name}}</span></div>
                    <div class="collectcss">备注：<span>{{collect.desc}}</span></div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
            <el-tab-pane label="还款计划" name="5"  >
              <div class="filter-container" style="margin-left:3%" v-if="detail.order_status<4">
                <el-input v-model="pay_plan.total_money" placeholder="项目金额" style="width: 130px;" class="filter-item"/>
                <el-input v-model="pay_plan.total_period" placeholder="期数" style="width: 130px;" class="filter-item"/>
                <el-input v-model="pay_plan.money_rate" placeholder="利率" style="width: 130px;" class="filter-item"/>
                <el-select v-model="pay_plan.hk_way" placeholder="还款方式" class="filter-item" style="width:130px">
                  <el-option label="梯度还款" value="1" />
                  <el-option label="等额本金" value="2" />
                </el-select>
                <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="plan">查看</el-button>
              </div>
              
              <el-table :key="tableRecord"  size="mini" :data="pay_plan.plan" border fit highlight-current-row style="width: 70%;margin-left:3%" >

                  <el-table-column label="期数" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.num }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="本金" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.benjin }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="利息" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.rate }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="还款金额" class-name="status-col">
                    <template slot-scope="{row}">{{ row.allmoney }}</template>
                  </el-table-column>
              </el-table>
            </el-tab-pane>
            
          </el-tabs>
        </template>
      </el-collapse-item>
    </el-collapse>
    <el-dialog title="视频" :visible.sync="dialogVideoVisible">
      <div style="width:100%;height:600px;text-align:center" class="circle" ref="rotate">
        <video-player
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          format="yyyy-MM-dd"
          custom-event-name="customstatechangedeventname"
          style="width:100%;height:600px;text-align:center"
          class="video-player vjs-custom-skin"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rotate($event)" >旋 转</el-button>
        <el-button type="primary" @click="dialogVideoVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import {
  fetchOrderDetail,
  submitCheckStatus,
  getBaiRongData
} from '@/api/order'
import {
    getCollectRecord,getCollectWay,collectRecordAdd
  } from '@/api/collection'
import {
  getNodes
} from '@/utils'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {
  videoPlayer
} from 'vue-video-player'
import {
  formatDate
} from '@/utils/formatDate.js'
export default {
  components: {
    videoPlayer // 注册组件
  },
  filters: {
    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    numberFormat(number) {
      return parseFloat(number).toFixed(1)
    },
    formatDateYearMonth(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-28')
    },
    formatDateYearMonthDay(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  data() {
    return {
      tableDataMain: [],
      nodes:[],
      dialogBoolAble:false,
      dialogTdAble:false,
      form: {
        order_id: '',
        order_status: '',
        factoring_model: 0,
        factoring_rate: 0,
        first_pay: 0,
        content: ''
      },
      idcard_check:{
        code:0,
        msg:''
      },
      collectform: {
          way: [],
          result:'',
          desc: '',
          order_id:''
        },
      way_list:[],
      reverse: false,
      activeNameDone:'1',
      activeName:['4'],
      showImg: false,
      current: 0,
      detail: {},
      eight: 0,
      project: [],
      contract: [],
      operation: [],
      bool: [],
      tong: {
        final_score: '',
        final_decision: ''
      },
      bairong: {
        final_weight: '',
        final_decision: '',
        person: '',
        idcard:{
          RESULT:1,
          MESSAGE:'一致',
        }
      },
      tableRecord: 1,
      listRecordLoading: true,
      listLoading: true,
      record: [],
      pay_day:'',
      activeTabs: 'first',
      activeImage: ['11'],
      activeText: ['1'],
      dialogImageVisible: false,
      dialogVideoVisible: false,
      path: null,
      drawer: false,
      src: null,
      order_id:'',
      collect_list: [],
      playerOptions: {

        autoplay: true,
        muted: false,

        height: '600px',
        width: '800px',

        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: ''
        }],

        poster: '/static/images/author.jpg',
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      rules: {
        order_status: [{
          required: true,
          message: '审核状态必须选择',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '审核备注必须填写',
          trigger: 'blur'
        }]
      },
      pay_plan:{
        total_money:'',
        total_period:'',
        money_rate:'',
        hk_way:'',
        plan:[]
      }
    }
  },
  computed: {
    period_money: function() {
      if (this.detail.project.total_period == null) {
        return 0
      } else {
        this.pay_plan.total_money = this.detail.project.total_money;
        this.pay_plan.total_period = this.detail.project.total_period;
        this.pay_plan.money_rate = this.detail.project.money_rate;
        this.pay_plan.hk_way = this.detail.hk_way;
        this.plan()
        if(this.detail.hk_way==1){
          return parseFloat(this.detail.project.total_money / this.detail.project.total_period + this.detail.project.total_money * this.detail.project.money_rate * 2).toFixed(1)
        }else{
          return parseFloat(this.detail.project.total_money / this.detail.project.total_period + this.detail.project.total_money * this.detail.project.money_rate).toFixed(1)
        }
      }
    },
    payment_date: function() {
      var time;
      if(this.detail.pass_time!=null){
        time = this.detail.pass_time ; 
      }else{
        time = this.detail.project.create_time;
      }
      var date = new Date(time * 1000)
      var day = date.getDate()
      if (day <= 28) {
        this.eight = 0
        this.pay_day = day
      } else {
        this.eight = 1
        this.pay_day = 28
      }
      this.paid_date = new Date(time * 1000).setMonth(new Date(time * 1000).getMonth() + parseInt(this.detail.project.total_period))
      return new Date(time * 1000).setMonth(new Date(time *1000).getMonth() + 1)
    }
      
  },
  created() {
    this.getOrderDetail();
    this.getWay();
    this.order_id = this.$route.params.order_id;
    this.collectform.order_id = this.$route.params.order_id;
    this.getCollectRecord(this.order_id);;
    this.nodes = getNodes()
    this.getBaiRongData();
  },
  methods: {
    toDetail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    getBaiRongData(){
      let para = {order_id:this.order_id}
      getBaiRongData(para).then(response => {
         this.bairong = response.data.rule_data.Rule.result
         this.bairong.person = response.data.person.result_name
         if(response.data.idcard){
          this.bairong.idcard = response.data.idcard.IdTwo_z
         }
      })
    },
    tabChange(){
      if(this.nodes.indexOf('91')==-1||(this.detail.order_status!=1 && this.detail.order_status!=5 && this.detail.order_status!=8 && this.detail.order_status!=10&& this.detail.order_status!=11)){
          this.activeNameDone='4';
      }
    },
    // 点击放大图片
    clickImg(e) {
      this.showImg = true
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src
    },
    plan(){
      console.log(123)
      this.pay_plan.plan=[];
      if(this.pay_plan.hk_way==''||this.pay_plan.total_money==''||this.pay_plan.total_period==''||this.pay_plan.money_rate==''){
          this.$message.error('请完善信息！');return;
      }
      let benjin = parseFloat(this.pay_plan.total_money / this.pay_plan.total_period).toFixed(1);
      let rate = parseFloat(this.pay_plan.total_money * this.pay_plan.money_rate).toFixed(1);
      for(let i=0;i<this.pay_plan.total_period;i++){
        let a = {num:parseInt(i+1),benjin:benjin}
        if(this.pay_plan.hk_way==1){
          if(i<parseInt(this.pay_plan.total_period/3)){
            a.rate = parseFloat(rate*2).toFixed(1);
          }
          if(i>=parseInt(this.pay_plan.total_period/3)&&i<(parseInt(this.pay_plan.total_period/3)*2)){
            a.rate = parseFloat(rate).toFixed(1);
          }
           if(i>=(parseInt(this.pay_plan.total_period/3)*2)){
            a.rate = 0;
          }
        }else{
          a.rate = parseFloat(rate).toFixed(1);
        }
        a.allmoney = (parseFloat(a.rate)+parseFloat(benjin)).toFixed(1);
        this.pay_plan.plan.push(a)
      }
    },
    getCollectRecord(order_id){
      let data = {order_id:order_id}
      getCollectRecord(data).then(response => {
        this.collect_list = response.data;
      })
    },
    onSubmitCollect(){
      if(this.collectform.way==''||this.collectform.result==''){
        this.$notify({
          title: '提示',
          message: '请完善信息',
          type: 'warning',
          duration:2000
        });
        return;
      }
      collectRecordAdd(this.collectform).then(response => {
        if(response.code==200){
           this.$notify({
            title: '提示',
            message: '保存成功',
            type: 'success',
            duration:2000
          });
          this.getCollectRecord(this.form.order_id);
          this.collectform.way = [];
          this.collectform.result = '';
          this.collectform.desc = '';
        }
        this.listLoading = false
      })
    },
    getWay(){
       getCollectWay().then(response => {
        this.way_list = response.data
      })
    },
    mathauto(lab){
      if(lab==1){
        this.form.first_pay = (this.detail.project.total_money*this.form.factoring_rate).toFixed(0)
      }else{
        this.form.factoring_rate = (this.form.first_pay/this.detail.project.total_money).toFixed(5)
      }
        
    },

    // 关闭放大图片
    closeBigImg(e) {
      this.showImg = false
    },
    booldata(order_id) {
      this.$router.push('/order/bool/' + order_id)
    },
    tongdun(order_id) {
      this.$router.push('/order/tongdun/' + order_id)
    },
    bairongdetail(order_id) {
      this.$router.push('/order/bairong/' + order_id)
    },
    rotate(e) {
      var ele = e.currentTarget
      this.current = (this.current + 90) % 360
      console.log(this.current)
      this.$refs.rotate.style.transform = `rotate(${this.current}deg)`
      // ele.transform = 'translateX(10px)'
    },

    openImageDialog(path) {
      this.dialogImageVisible = true
      this.path = path
    },
    openVideoDialog(path) {
      this.dialogVideoVisible = true
      this.playerOptions.sources[0].src = path
      // console.log(this.playerOptions.sources.src)
    },
    onSubmit() {
      this.listRecordLoading = true;
      if (this.form.order_status == 7) {
        if ((this.form.factoring_model == 0) || (this.form.factoring_rate > 1)) {
          this.$message.error('保理模式必须选择，或者折扣必须大于0小于1')
        } else {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              submitCheckStatus(this.form).then(resp => {
                this.listRecordLoading = false
                this.$notify({
                  title: 'Success',
                  message: 'Created Successfully',
                  type: 'success',
                  duration: 2000,
                  onClose: this.getOrderDetail()
                })
              })
              // console.log(this.form)
            }
          })
        }
      } else {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            submitCheckStatus(this.form).then(resp => {
              this.listRecordLoading = false
              this.$notify({
                title: 'Success',
                message: 'Created Successfully',
                type: 'success',
                duration: 2000,
                onClose: this.getOrderDetail()
              })
            })
            // console.log(this.form)
          }
        })
      }
      this.detail.order_status=this.form.order_status
      this.tabChange();
    },
    getOrderDetail() {
      const order_id = this.$route.params.order_id
      fetchOrderDetail(order_id).then(resp => {
        this.detail = resp.data.detail
        this.form.factoring_rate = resp.data.detail.factoring_rate
        this.form.first_pay = resp.data.detail.first_pay
        this.form.factoring_model = resp.data.detail.factoring_model
        this.project = resp.data.project
        this.record = resp.data.record
        this.contract = resp.data.contract
        this.bool = resp.data.bool.resp_data
        // this.idcard_check = resp.data.detail.check_idcard
        // this.tong = resp.data.tong.result_desc.ANTIFRAUD

        this.tableDataMain = [
          {
            title: '医院 ：',
            value: this.detail.merchant_name,
          }, 
          {
            title: '客户姓名 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '项目 ：',
            value: this.project.total_money,
          }, 
          {
            title: '产品单价 ：',
            value: this.project.total_money,
          }, 
          {
            title: '贷款金额 ：',
            value: this.project.total_money,
          }, 
          {
            title: '分期期数 ：',
            value: this.project.total_period,
          }, 
          {
            title: '月还款 ：',
            value: this.period_money,
          }, 
          {
            title: '还款日期 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '身份证号码 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '手机号码 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '手机实名 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '手机使用年限：',
            value: this.detail.real_name,
          }, 
          {
            title: '支付宝实名 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '工作 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '公司地址 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '居住地址 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '芝麻分 ：',
            value: this.detail.real_name,
          }, 
          {
            title: '是否有存款 ：',
            value: this.detail.real_name,
          }, 
        ],
        
        this.operation = resp.data.oper.attach_ids
        this.form.order_id = order_id
        if ((this.detail.order_status == 1) || (this.detail.order_status == 5) || (this.detail.order_status == 8) ||
            (this.detail.order_status == 10) || (this.detail.order_status == 11)) {
          this.activeTabs = 'first'
        } else if ((this.detail.order_status == 13) || (this.detail.order_status == 12)) {
          this.activeTabs = 'three'
        } else {
          this.activeTabs = 'second'
        }
        if (this.detail.order_status >= 8) {
          this.activeImage.push('22')
        }
        if (this.detail.order_status >= 11) {
          this.activeImage.push('33')
        }
        this.tabChange();
        this.listLoading=false;
      })
    },
    handleChange(val) {
      //console.log(val)
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    }

  }
}
</script>

<style>
.app-container{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
.box{margin-left:50px;margin-right: 50px;}
.toinfo{text-align: right;}
.infolist_top{margin-top:10px;}
.dalogg{width:100%;;height:100%;;background:#fff;position:absolute;z-index:100;opacity:0}
.infolist{color:#333;font-size:13px;margin-left: 10px;}
.infolist_file{color:#1890FF;font-size:15px;margin-left: 10px;}
.mgtop{margin-top:10px}
.el-divider--horizontal{margin:10px 0;}
.l_title{font-size:14px;}
.media{float: left;margin-left: 20px;}
.video_box{width:200px;height:200px;margin-left: 5px;float: left;position: relative;}
.img_box{width:100px;height:100px;margin-left: 5px;float: left;position: relative;margin-top: 5px;}
.img_box img{margin-left: 50%;transform: translateX(-50%);}
.hovers{position: absolute;top:0px;width: 100%;background: #fff;color: #333;text-align: center;z-index: 100;display: none;}
.img_box:hover .hovers{display: block;}
.el-tabs__nav-wrap::after{border-bottom: none;}
.el-tabs__nav-wrap::after{background-color:#fff}
  video{
    width:100%;height:100%;text-align:center;
  }
  .demofrom {
    height: 15px;
  }

  .input_video {
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }
  @keyframes rotate{

      0%{ transform: (0deg) }

      100%{transform:(360deg)}

  }

.go{

  animate: rotate 1s;

  }
.el-collapse-item__header{margin-left:50px;margin-right:50px;border-bottom:none;color:#1890FF}
.el-collapse-item{border-bottom:1px solid #e6ebf5;}
</style>
